<?php

/* @var $this yii\web\View */

$this->title = 'SYSLOG配置';
?>

<!-- Main content -->
<section class="content" ng-app="myApp">
  <div class="row">
    <div class="col-xs-12">
      <div class="nav-tabs-custom">

        <?php include 'nav.php';?>

        <div class="tab-content">
          <div class="tab-pane active" id="Syslog" ng-controller="SyslogCtrl">
            <button  class="btn btn-md btn-default"ng-click="addSyslog()">添加SYSLOG配置</button>
            <div class="row">
              <div class="col-sm-12">
                <table class="table table-hover" style="border-bottom: 1px solid #f4f4f4;">
                  <tr>
                    <th style="text-align:center;">序号</th>
                    <th>SYSLOG服务器IP</th>
                    <th>端口</th>
                    <th>传输协议</th>
                    <th>状态</th>
                    <th>操作</th>
                  </tr>
                  <tr style="cursor: pointer;" ng-repeat="(index,item) in syslogList.data">
                    <td style="text-align: center;" ng-bind="$index+1+((syslogList.pageNow-1)*syslogList.rows)"></td>
                    <td ng-bind="item.server_ip"></td>
                    <td ng-bind="item.server_port"></td>
                    <td ng-bind="item.protocol"></td>
                    <td ng-bind="item.status=='1'?'启用':'未启用'"></td>
                    <td>
                      <button class="btn btn-xs btn-default" ng-click="editSyslog(item);$event.stopPropagation();"><i
                          class="fa fa-edit" data-toggle="tooltip" title="编辑"></i></button>
                      <button class="btn btn-xs btn-default" ng-click="delSyslog(item);$event.stopPropagation();"><i
                          class="fa fa-trash-o" data-toggle="tooltip" title="删除"></i></button>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div class="row">

              <div class="col-sm-12" style="min-height: 20px;">
                <span>共<span ng-bind="syslogList.count"></span>条记录</span>
                <ul class="pagination pagination-sm no-margin pull-right" ng-if="syslogList.count>0">
                  <li><a href="javascript:void(0);" ng-click="getPage(syslogList.pageNow-1)"
                      ng-if="syslogList.pageNow>1">上一页</a></li>
                  <li><a href="javascript:void(0);" ng-click="getPage(1)" ng-if="syslogList.pageNow>1">1</a></li>
                  <li><a href="javascript:void(0);" ng-if="syslogList.pageNow>4">...</a></li>
                  <li><a href="javascript:void(0);" ng-click="getPage(syslogList.pageNow-2)"
                      ng-bind="syslogList.pageNow-2" ng-if="syslogList.pageNow>3"></a></li>
                  <li><a href="javascript:void(0);" ng-click="getPage(syslogList.pageNow-1)"
                      ng-bind="syslogList.pageNow-1" ng-if="syslogList.pageNow>2"></a></li>
                  <li class="active"><a href="javascript:void(0);" ng-bind="syslogList.pageNow"></a></li>
                  <li><a href="javascript:void(0);" ng-click="getPage(syslogList.pageNow+1)"
                      ng-bind="syslogList.pageNow+1" ng-if="syslogList.pageNow<syslogList.maxPage-1"></a></li>
                  <li><a href="javascript:void(0);" ng-click="getPage(syslogList.pageNow+2)"
                      ng-bind="syslogList.pageNow+2" ng-if="syslogList.pageNow<syslogList.maxPage-2"></a></li>
                  <li><a href="javascript:void(0);" ng-if="syslogList.pageNow<syslogList.maxPage-3">...</a></li>
                  <li><a href="javascript:void(0);" ng-click="getPage(syslogList.maxPage)" ng-bind="syslogList.maxPage"
                      ng-if="syslogList.pageNow<syslogList.maxPage"></a></li>
                  <li><a href="javascript:void(0);" ng-click="getPage(syslogList.pageNow+1)"
                      ng-if="syslogList.pageNow<syslogList.maxPage">下一页</a></li>
                </ul>
              </div>

            </div>

            <div style="display: none;" id="hideenBox">
              <div id="addSyslog">
                <div class="syslog_box">
                  <div class="item_box">
                    <div class="item_top">
                      <div class='item_title'>是否启用</div>
                      <div class="checkbox">
                        <input class='tgl tgl-ios' id='checkboxTrue' type='checkbox' ng-checked="addSyslogData.status"
                          ng-click="addSyslogData.status=!addSyslogData.status">
                        <label class='tgl-btn' for='checkboxTrue'></label>
                      </div>
                    </div>
                    <div style="padding-right: 20px;">
                      <p>SYSLOG服务器IP <span class="require">*</span></p>
                      <input class="form-control" placeholder="请输入SYSLOG服务器IP" ng-model="addSyslogData.server_ip">
                    </div>
                  </div>
                  <div class="item_box">
                    <div class="item_top">
                      <div class='item_title'>状态</div>
                      <div class="checkbox">
                        <label> <input name="pollresult" class="radio_type" id="raido1" type="radio" value="udp"
                            ng-model="addSyslogData.protocol"> <span class="radio_name">udp</span> </label>
                        <label> <input name="pollresult" class="radio_type" id="raido1" type="radio" value="tcp"
                            ng-model="addSyslogData.protocol"> <span class="radio_name">tcp</span> </label>
                      </div>
                    </div>
                    <div>
                      <p>端口 <span class="require">*</span></p>
                      <input class="form-control" id="port" placeholder="请输入端口"
                        onInput="value = value.replace(/[^\d]/g,'')" ng-model="addSyslogData.server_port">
                    </div>
                  </div>
                </div>
              </div>
              <div id="editSyslog">
                <div class="syslog_box">
                  <div class="item_box">
                    <div class="item_top">
                      <div class='item_title'>是否启用</div>
                      <div class="checkbox">
                        <input class='tgl tgl-ios' id='checkboxTrue22' type='checkbox' ng-checked="editItem.status"
                          ng-click="editItem.status=!editItem.status">
                        <label class='tgl-btn' for='checkboxTrue22'></label>
                      </div>
                    </div>
                    <div style="padding-right: 20px;">
                      <p>SYSLOG服务器IP <span class="require">*</span></p>
                      <input class="form-control" placeholder="请输入SYSLOG服务器IP" ng-model="editItem.server_ip">
                    </div>
                  </div>
                  <div class="item_box">
                    <div class="item_top">
                      <div class='item_title'>状态</div>
                      <div class="checkbox">
                        <label> <input name="pollresult22" class="radio_type" id="raido2" type="radio" value="udp"
                            ng-model="editItem.protocol"> <span class="radio_name">udp</span> </label>
                        <label> <input name="pollresult22" class="radio_type" id="raido2" type="radio" value="tcp"
                            ng-model="editItem.protocol"> <span class="radio_name">tcp</span> </label>
                      </div>
                    </div>
                    <div>
                      <p>端口 <span class="require">*</span></p>
                      <input class="form-control" id="port2" placeholder="请输入端口"
                        onInput="value = value.replace(/[^\d]/g,'')" ng-model="editItem.server_port">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<style>
  .syslog_box {
    width: 100%;
    height: 100%;
    display: flex;
    font-size: 14px;
  }

  .item_title {
    width: 72px;
    display: inline-block;
    vertical-align: middle;
  }

  .item_top {
    height: 50px;
    line-height: 50px;
    margin-bottom: 20px;
  }

  .checkbox {
    margin: 0;
    display: inline-block;
    vertical-align: middle;
  }

  .item_box {
    flex: 1
  }

  #hideenBox .tgl-ios+.tgl-btn {
    border-radius: 20px;
  }

  #hideenBox .tgl+.tgl-btn {
    width: 40px;
    height: 20px;
  }

  /* #hideenBox .tgl-ios:checked + .tgl-btn{
   background:
  } */
  .radio_type {
    cursor: pointer;
    margin: 0;
    vertical-align: middle;
  }

  .syslog_box .checkbox label,
  .radio label {
    margin-right: 10px;
    padding: 0;
  }

  .radio_name {
    vertical-align: middle;
    margin-left: 5px;
  }

  input[type=radio]:focus {
    outline-color: #fff;
    outline: none
  }

  .radio_type {
    width: 20px;
    height: 20px;
    appearance: none;
    position: relative;
    outline: none;
  }

  .radio_type:before {
    content: "";
    width: 15px;
    height: 15px;
    border: 1px solid #86d993;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
  }

  .radio_type:checked:before {
    content: "";
    width: 15px;
    height: 15px;
    border: 1px solid #86d993;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
  }

  .radio_type:checked:after {
    content: "";
    width: 9px;
    height: 9px;
    text-align: center;
    background: #86d993;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 7px;
    left: 3px;
  }

  .require {
    color: red;
  }
</style>
<script type="text/javascript" src="/js/controllers/syslog.js"></script>